<template>
  <div class="box">
    <div class="title">
      <img
        src="https://m.mi.com/static/img/icons/apple-touch-icon-152x152.png"
        alt=""
      />
      <span>让每个人都能享受科技的乐趣</span>
    </div>
    <van-form @submit="onSubmit">
      <h3>小米帐号登录</h3>
      <van-field
        v-model="username"
        name="username"
        placeholder="邮箱/手机号码/小米ID"
        :rules="[{ required: true, message: '请填写邮箱/手机号码/小米ID' }]"
      />
      <van-field
        v-model.number="password"
        type="password"
        name="password"
        placeholder="请输入密码"
        :rules="[{ required: true, message: '请输入密码' }]"
      />
      <div style="margin: 16px">
        <van-button round block type="info" native-type="submit"
          >登录</van-button
        >
      </div>
    </van-form>
  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    return {
      username: "",
      password: ""
    };
  },
  methods: {
    onSubmit(values) {
      console.log("submit", values);
      if(values.username === this.$username && values.password === this.$password) {
          localStorage.setItem("Token", true)    
          this.$router.push({path: '/'})
      }
    }
  }
};
</script>

<style lang="less" scoped>
.box {
  width: 5.4rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  padding-top: 0.3rem;
  .title {
    padding: 1rem 0 0.6rem 0;
    width: 5.4rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-size: cover;
    background-image: url(https://cdn.web-global.fds.api.mi-img.com/mcfe--mi-account/static/static/media/background.d3d7d2dd.png);
    img {
      width: 0.48rem;
      height: 0.48rem;
    }
    span {
      margin-top: 0.14rem;
      color: rgba(0, 0, 0, 0.6);
      font-size: 0.18rem;
      line-height: 1.5;
      letter-spacing: 0.02rem;
    }
  }
  .van-form {
    width: 4.6rem;
    margin: 0 auto;
    padding-top: 0.2rem;
    display: flex;
    flex-direction: column;
    h3 {
      color: #000;
      font-size: 0.3rem;
      font-weight: 600;
      line-height: 1.3;
      margin-bottom: 0.2rem;
    }
    .van-checkbox {
        margin: 0.2rem 0;
    }
  }
}
</style>